<!-- 销售订单结算编辑弹窗 -->
<template>
  <div class="ele-body">
    <a-card :title="saleOrderSettlementModalApp.title" :bordered="false">
      <a-form
        ref="form2"
        :model="saleOrderSettlementModalApp.saleOrderSettlement"
        :rules="saleOrderSettlementModalApp.rules"
        :label-col="{md: {span: 7}, sm: {span: 24}}"
        :wrapper-col="{md: {span: 17}, sm: {span: 24}}">
        <a-row :gutter="16">

          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="订单(桌号):" name="saleOrderId">
              <m-entity-select
                :default-value="saleOrderSettlementModalApp.saleOrderSettlement.saleOrderName"
                v-model:value="saleOrderSettlementModalApp.saleOrderSettlement.saleOrderId"
                placeholder="请选择销售订单"
                module="sale"
                :queryFilters="{status:'未结算'}"
                showOptionsName="deskNum"
                entity="SaleOrder"
                class="ele-fluid"
                @getEntitySaleOrderSelect="(item)=>{
                  saleOrderSettlementModalApp.saleOrderSettlement.settlPrice=item.price
                  getTableInfo(item.eid)
                }"
              />
              <!--              if(saleOrderSettlementModalApp.saleOrderSettlement.discount!=undefined&&saleOrderSettlementModalApp.saleOrderSettlement.discount!=''){-->
              <!--              saleOrderSettlementModalApp.saleOrderSettlement.settlPrice=item.price*saleOrderSettlementModalApp.saleOrderSettlement.discount-->
              <!--              }else{-->
              <!--              saleOrderSettlementModalApp.saleOrderSettlement.orderPrice=item.price-->
              <!--              }-->
            </a-form-item>
          </a-col>
          <!--          <a-col :lg="6" :md="12" :sm="24" :xs="24">-->
          <!--            <a-form-item label="优惠:" name="settlPrice">-->
          <!--              <a-input-number-->
          <!--                v-model:value="saleOrderSettlementModalApp.saleOrderSettlement.discount"-->
          <!--                placeholder="请输入打折力度"-->
          <!--                @change="()=>{if(saleOrderSettlementModalApp.saleOrderSettlement.orderPrice!=undefined&&saleOrderSettlementModalApp.saleOrderSettlement.orderPrice!=''){-->
          <!--                    saleOrderSettlementModalApp.saleOrderSettlement.settlPrice=saleOrderSettlementModalApp.saleOrderSettlement.orderPrice*saleOrderSettlementModalApp.saleOrderSettlement.discount-->
          <!--                  } }"-->
          <!--                class="ele-fluid importanceI"></a-input-number>-->
          <!--            </a-form-item>-->
          <!--          </a-col>-->
          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="结算价格:" name="settlPrice">
              <a-input-number
                v-model:value="saleOrderSettlementModalApp.saleOrderSettlement.settlPrice"
                placeholder="请输入结算价格"
                class="ele-fluid importanceI"></a-input-number>
            </a-form-item>
          </a-col>

          <!--          <a-col :lg="6" :md="12" :sm="24" :xs="24">-->
          <!--            <a-form-item label="付款人:" name="payer">-->
          <!--              <a-input-->
          <!--                v-model:value="saleOrderSettlementModalApp.saleOrderSettlement.payer"-->
          <!--                placeholder="请输入付款人"-->
          <!--                :maxlength="255"-->
          <!--                allow-clear-->
          <!--              />-->
          <!--            </a-form-item>-->
          <!--          </a-col>-->

          <a-col :lg="6" :md="12" :sm="24" :xs="24">
            <a-form-item label="付款方式:" name="payer">
              <m-dict-select
                v-model:value="saleOrderSettlementModalApp.saleOrderSettlement.payMethod"
                placeholder="请选择付款方式"
                dict="付款方式"/>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24" :xs="24">
            <a-form-item :wrapper-col="{md: {offset: 6}}" style="margin-bottom: -20px">
              <!--class="ele-pull-right"-->
              <div v-if="saleOrderSettlementModalApp.display">
                <teleport to="#saleOrderSettlementEditModalFooter">
                  <div>
                    <a-space size="middle">
                      <a-button @click="saleOrderSettlementListApp.editModalShowing=false">取消
                      </a-button>
                      <a-button
                        type="primary"
                        @click="onSubmit(saleOrderSettlementModalApp.saleOrderSettlement)"
                        :loading="loading">提交
                      </a-button>
                      <!--<a-button v-if="!eid"
                                type="dashed"
                                @click="continueSubmit"
                                :loading="loading">继续提交
                      </a-button>-->
                    </a-space>
                  </div>
                </teleport>
              </div>
              <div v-if="!saleOrderSettlementModalApp.display">
                <a-space size="middle">
                  <a-button @click="onBack()">返回列表</a-button>
                  <a-button
                    type="primary"
                    @click="onSubmit(saleOrderSettlementModalApp.saleOrderSettlement)"
                    :loading="loading">提交
                  </a-button>
                </a-space>
              </div>

            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>


    <vxe-table
      ref="xTable"
      :data="tableDateInfo">
      <vxe-column type="seq" width="60" title="序号"></vxe-column>
      <vxe-column field="name" title="名称"></vxe-column>
      <vxe-column field="menuPrice" title="单价"></vxe-column>
      <vxe-column field="amount" title="数量"></vxe-column>
      <vxe-column field="totalPrice" title="总价"></vxe-column>
    </vxe-table>
  </div>

</template>

<script>
import {defineComponent, inject, reactive, onMounted, ref} from 'vue'
import {useRoute, useRouter} from "vue-router"
import {SaleOrderSettlementService} from "@/views/restaurant/sale/saleOrderSettlement/saleOrderSettlementService";
import {VXETable} from 'vxe-table'
import {useStore} from "vuex";
import regions from 'ele-admin-pro/packages/regions.js';
import MDictSelect from "@/components/MDict/dictSelect";
import MEntitySelect from "@/components/MEntity/entitySelect";

export default defineComponent({
  components: {
    MEntitySelect,
    MDictSelect
  },
  setup() {
    // 省市区数据
    const cityData = regions
    const route = useRoute();
    const router = useRouter();
    const store = useStore();
    let routeId = route.params.id;
    let saleOrderSettlementListApp = inject('saleOrderSettlementListApp', reactive({}));
    let saleOrderSettlementGrid = inject("saleOrderSettlementGrid", reactive({}));
    const saleOrderSettlementModalApp = reactive({
      id: null,
      saleOrderSettlement: {},
      isEdit: false,
      display: false
    });
    saleOrderSettlementModalApp.rules = {
      saleOrderId: [
        {
          required: true,
          type: 'number',
          message: '请输入销售订单',
          trigger: 'blur'
        }
      ],
      saleOrderName: [
        {
          required: false,
          type: 'string',
          message: '请输入销售订单',
          trigger: 'blur'
        }
      ],
      settlPrice: [
        {
          required: true,
          type: 'number',
          message: '请输入结算价格',
          trigger: 'blur'
        }
      ],
      settlDate: [
        {
          required: false,
          type: 'string',
          message: '请输入结算时间',
          trigger: 'blur'
        }
      ],
      serialNum: [
        {
          required: true,
          type: 'string',
          message: '请输入流水号',
          trigger: 'blur'
        }
      ],
      payer: [
        {
          required: false,
          type: 'string',
          message: '请输入付款人',
          trigger: 'blur'
        }
      ],
    }

    onMounted(() => {
      //清理数据
      saleOrderSettlementModalApp.saleOrderSettlement = reactive({});
      if (routeId) {//路由
        saleOrderSettlementModalApp.id = routeId;
        saleOrderSettlementModalApp.display = false;
        findSaleOrderSettlement(saleOrderSettlementModalApp.id);
      } else if (saleOrderSettlementListApp.editModalForEdit) {//修改弹窗
        saleOrderSettlementModalApp.id = saleOrderSettlementListApp.currentId;
        saleOrderSettlementModalApp.display = true;
      } else if (!saleOrderSettlementListApp.editModalForEdit && saleOrderSettlementListApp.addModalForEdit) {//新增弹窗
        saleOrderSettlementModalApp.display = true;
      } else {
        saleOrderSettlementModalApp.title = "新增";
      }
      if (saleOrderSettlementModalApp.id) findSaleOrderSettlement(saleOrderSettlementModalApp.id);
    })

    const findSaleOrderSettlement = (id) => {
      SaleOrderSettlementService.findSaleOrderSettlementForView(id).then((res) => {
        saleOrderSettlementModalApp.saleOrderSettlement = res.data;
        getTableInfo(saleOrderSettlementModalApp.saleOrderSettlement.saleOrderId)
        //TODO:为编辑准备.
      }).catch(error => {
        VXETable.modal.message({content: `查找出错，原因是：${error.message}`, status: 'error'});
      })
    }

    /*TODO:提交 新增&编辑*/
    const onSubmit = (data) => {
      // debugger;
      //当为数组时用逗号连接
      if (data.eid) {
        //修改
        SaleOrderSettlementService.updateSaleOrderSettlement(data).then((res) => {
          console.log(res);
          VXETable.modal.message({content: '操作成功', status: 'success'});
          setTimeout(onBack, 3000);
        }).catch(error => {
          VXETable.modal.message({content: `系统错误，原因是：${error.message}`, status: 'error'});
        })
      } else {
        //新增
        SaleOrderSettlementService.saveSaleOrderSettlement(data).then((res) => {
          console.log(res);
          VXETable.modal.message({content: '操作成功', status: 'success'});
          setTimeout(onBack, 3000);
        }).catch(error => {
          VXETable.modal.message({content: `系统错误，原因是：${error.message}`, status: 'error'});
        })
      }
    }

    /*TODO:继续提交*/
    const continueSubmit = () => {
      VXETable.modal.message({content: 'error 提示', status: 'error'});
    }
    const tableDateInfo = ref([]);
    const getTableInfo = (id) => {
      SaleOrderSettlementService.getMenuSaleRecordsByOrderId(id).then((res) => {
        tableDateInfo.value = res.data;
        tableDateInfo.value.forEach(item => {
          item.totalPrice = item.menuPrice * item.amount;
        })
      })
    }
    /*TODO:返回列表*/
    const onBack = () => {
      router.push(`/restaurant/sale/saleOrderSettlement`);
      store.dispatch('user/tabRemove', route.fullPath);

      setTimeout(() => {
        saleOrderSettlementGrid.value.commitProxy("query");
      }, 1500);
      saleOrderSettlementListApp.editModalShowing = false;
    }
    return {
      cityData,
      routeId,
      saleOrderSettlementListApp,
      saleOrderSettlementModalApp,
      onSubmit,
      continueSubmit,
      onBack,
      tableDateInfo,
      getTableInfo
    }

  },
})
</script>

<style scoped>

</style>
